<template>
  <div class="commonDetail">
    <Common-Instance
      ref="common-instance"
      class="t10"
      :just-look="justLook"
      :auto-get-data="autoGetData"
      :last-index="insertIndexLast"
    />

    <div
      v-if="isBusinessFieldsShow === '1'"
      class="common-BusinessFields"
    >
      <div class="title">业务字段</div>
      <Common-Instance
        ref="common-instance1"
        class="save-height"
        :just-look="false"
        :auto-get-data="autoGetData"
      />

      <div v-if="!businessFields.length" style="background: #fff;padding: 16px;">
        请去后台设置业务字段
      </div>
    </div>

    <div class="fixedBottom">
      <slot name="myBottom">
        <div
          class="mybtn normal "
          @click="nextStep"
        >
          下一步
        </div>
      </slot>
    </div>

  </div>
</template>

<script>
import CommonInstance from 'pages/CommomList/CommonInstance';

import _ from 'lodash';
import { createNamespacedHelpers } from 'vuex';
import { getLocalStorage } from '@/utils/utils';
import { BUSINESSFIELDSKEY } from './CommonList.vue';
import { commonRequest } from '@/api/commonlist';
import { Message } from '@/utils/utils';
// const cacheRenderData = 'listDetailRenderData';

const { mapMutations, mapState } = createNamespacedHelpers('formModule');

export default {
  components: {
    CommonInstance
  },

  props: {
    autoGetData: {
      type: Boolean,
      default: true
    },

    justLook: {
      type: Boolean,
      default: false
    },

    insertIndexLast: {
      type: Number,
      default: -1
    }
  },

  data() {
    return {
      isSp: '', // 是否审批 1 需要选择时间
      tableIds: [],
      renderData: [],
      step: 0,

      isBusinessFieldsShow: '', // 是否显示业务字段
      businessFields: []

    };
  },

  computed: {
    disabled() {
      return this.justLook;
    },

    ...mapState({
      stateDetailRenderList: state => state.listDetailRenderData,
      stateBusinessFields: state => state.businessFields
    })
  },

  created() {
    const query = this.$route.query;
    const { tableIds: ids } = query;
    const { autoGetData } = this;

    const isBusinessFieldsShow = query[BUSINESSFIELDSKEY];
    this.isBusinessFieldsShow = isBusinessFieldsShow;
    if (isBusinessFieldsShow === '1') {
      const businessFields = getLocalStorage(BUSINESSFIELDSKEY);
      // const businessFields = _.cloneDeep(this.stateBusinessFields);
      if (businessFields.length) {
        this.businessFields = businessFields.map(o => {
          return {
            ...o,
            title: o.cName,
            dataIndex: o.eName,
            componentType: 'input',
            myValue: '',
            promptText: '请输入'
          };
        });

        this.$nextTick(() => {
          const yewuInstance = this.$refs['common-instance1'];
          yewuInstance && yewuInstance.setData(this.businessFields);
        });
      }
    }

    if (!autoGetData) return;
    if (ids) {
      const tableIds = ids.split(',');
      if (tableIds.length > 1) {
        this.tableIds = tableIds;
      } else {
        Message('tableId不完整');
      }
    } else {
      Message('tableId没有拿到');
    }

    this.init();
  },

  methods: {
    ...mapMutations(
      [
        'setListDetailRenderData',
        'setBusinessFields'
      ]
    ),

    changeStep(n) {
      this.step = n;
    },

    filterList() {},

    init() {
      const { tableIds, getData } = this;
      const { isSp } = this.$route.params;

      this.isSp = isSp;
      if (tableIds.length) {
        const data = _.cloneDeep(this.stateDetailRenderList);
        if (data && data.length) {
          this.renderData = data;
        } else {
          getData();
        }
      }
    },

    getData() {
      return commonRequest(
        {
          tableId: this.tableIds[0]
        },
        '/dynamicHeader/findTableHeader',
        'get'
      ).then(res => {
        if (res.success) {
          res.data.forEach(item => {
            item.myValue = item.defaultValue || '';
          });
          const data = res.data.filter(item => item.status !== 1);
          this.renderData = data;

          this.setData(data);
        }
      });
    },

    setData(data) {
      this.$refs['common-instance'].setData(data);
    },

    nextStep() {
      const { isApprove, listId } = this.$route.query;

      if (this.isBusinessFieldsShow === '1') {
        // setLocal({
        //   templateBusinessFields: this.businessFields
        // });

        this.setBusinessFields(this.businessFields);
      }

      this.setListDetailRenderData(this.renderData);
      // setLocal({
      //   [cacheRenderData]: this.renderData
      // });
      this.$router.replace({
        path: `listDetailSp/${isApprove}/${listId}/${this.tableIds[0]}`
      });
    }
  }

};
</script>

<style lang="scss" scoped>
.commonDetail {
  // overflow: auto;

  .common-BusinessFields {
    margin-top: 30px;
    position: relative;

    .title {
      font-size: 22px;
      background-color: #fff;
      padding: 12px 16px;
      border-bottom: 1px solid rgba(0, 0, 0, .12);
    }
  }
   .fixedBottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
  }

  .t10 {
    top: 10px;
  }
}

.save-height {
  &::after {
    content: "";
    display: block;
    height: 44px;
  }
}
</style>
